<template>
  <div class="btns-tab-wrapper">
    <div 
      class="btns-item" 
      :class="{'active': isActive === val}"
      v-for="(val, index) in btnsList" 
      :key="index"
      @click="handleClickType(val)"
      >{{val}}</div>
  </div>

</template>

<script lang="ts">
import { defineComponent, PropType, ref } from '@vue/runtime-core';

export default defineComponent({
  name: 'BtnsTab',
  props: {
    btnsList: {
      type: Array as PropType<string[]>,
      default: ['充值']
    }
  },
  setup(props, ctx) {
    const isActive = ref(props.btnsList[0])
    const handleClickType = (val: string) => {
      isActive.value = val
      ctx.emit('isClickType', val)
    }
    return {
      isActive,
      handleClickType
    }
  }
})
</script>

<style lang="scss" scoped>
.btns-tab-wrapper {
  width: 100%;
  text-align: center;
  background-color: #fff;
  
  display: flex;

  .btns-item {
    border: 1px solid #d3d3d3;
    width: 60px;
    text-align: center;
    cursor: pointer;
  }
  .btns-item:nth-child(1) {
    border-right: 0;
  }
  .btns-item:nth-child(2) {
    border-right: 0;
  }
}
</style>